import Com from '@/psoon/base/com'
import Draw from '@/psoon/base/compose/draw'
import infoTpl from './infos.hbs'
import textTpl from './tpls/text.hbs'
import "./infos.scss"
// import './style.scss'

class Infos extends Com{
  elEvents = {
    'click @': e=>{
      if(this._curBlock) this._curBlock.setActive()
      e.stopPropagation && e.stopPropagation()
      e.preventDefault && e.preventDefault()
    },
    'click @ .info-title > a | Propagation,default' : '_turnX',
    // infos输入项的事件代理
    'click,blur,input,change @ .info-list': 'infosEvents'
  }

  _curConfig = null
  _curBlock = null

  constructor(){
    super(infoTpl)
  }

  infosEvents(e){
    const el = e.target
    if(e.type === 'input'){
      const prop = $(el).attr('name')
      this._curConfig[prop] = el.value
    }
    if(e.type === 'blur'){
      const prop = $(el).attr('name')
      if(prop == 'fs' && Number(el.value) < 9 ){
        el.value = 9
      }
      if(prop == 'scl' && Number(el.value) < 0.1 ){
        el.value = 0.1
      }
    }
  }
  // 提取block的编辑信息并显示
  setInfos( block ){
    if(block === 'clear' || !block){
      this._clearInfos()
      return 
    }
    this._curBlock = block
    const config = block.getConfig();
    this._rendInfosByConfig( config )
  }

  _clearInfos(){

  }

  _rendInfosByConfig( config ){
    if(config.tp === 'text'){
      this._curConfig = config
      const html = textTpl(config)
      this.getEl('.info-list').innerHTML = html
    }
  }

  _turnX(e){
    this.emit('turn-btn-click')
    // if( $(this.el).hasClass('open') ){
    //   $(this.el).removeClass('open')
    // }else{
    //   $(this.el).addClass('open')
    // }
    // console.log(e)
  }
}

export default Infos